<template>
    <el-dialog
        :visible="propValue"
        :custom-class="customClass"
        :lockScroll="lockScroll"
        :center="center"
        :beforeClose="beforeClose"
        :showClose="showClose"
        :closeOnClickModal="closeOnClickModal"
        :width="width"
        :top="top"
        :modal="modal"
        :modalAppendToBody="modalAppendToBody"
        :appendToBody="appendToBody"
        @close="_close"
        @open="$emit('open')"
        @closed="$emit('closed')"
        @opened="$emit('opened')"
    >
        <template slot="title">
            <div class="flex-row--c">
                <!-- <i class="el-icon-warning "></i> -->
                <p class="dialog-title-icon"></p>
                <span class="ml10">{{ title }}</span>
            </div>
        </template>

        <div class="sc-dialog-main" style="background: url()">
            <slot></slot>
        </div>

        <div slot="footer">
            <slot name="footer"></slot>
        </div>
    </el-dialog>
</template>
<script>
import config from '../../config'

export default {
    name: config.prefix + 'Dialog',
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },

        modal: {
            type: Boolean,
            default: true,
        },
        modalAppendToBody: {
            type: Boolean,
            default: true,
        },

        appendToBody: {
            type: Boolean,
            default: false,
        },

        lockScroll: {
            type: Boolean,
            default: true,
        },
        closeOnClickModal: {
            type: Boolean,
            default: true,
        },
        closeOnPressEscape: {
            type: Boolean,
            default: true,
        },
        showClose: {
            type: Boolean,
            default: true,
        },

        width: String,

        fullscreen: Boolean,

        customClass: {
            type: String,
            default: '',
        },

        top: {
            type: String,
            default: '85px',
        },
        beforeClose: Function,
        center: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {}
    },
    computed: {
        propValue: {
            get() {
                return this.value
            },
            set(nval) {
                this.$emit('input', nval)
            },
        },
    },
    methods: {
        //关闭弹窗
        _close() {
            this.$emit('close')
        },
    },
}
</script>
<style lang="scss" scoped>
.dialog-title-icon {
    width: 7px;
    height: 16px;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    color: rgb(153, 153, 153);
    background-color: $color;
    border-radius: 3px;
}

.sc-dialog-main {
    max-height: 70vh;
    overflow-y: auto;
}
</style>
